<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content>
        <dic-list-select v-model="listQuery.params.examType" dic-code="exam_type" title="选择考试类型" />
        <el-input v-model="listQuery.params.title" placeholder="搜索考试名称" style="width: 200px;" size="small" class="filter-item" />
      </template>

      <template #data-columns>

        <el-table-column
          label="考试名称"
          prop="title"
          show-overflow-tooltip
        />

        <el-table-column
          label="考试类型"
          prop="examType_dictText"
          align="center"
          width="120px"
          show-overflow-tooltip
        />


        <el-table-column
          label="考试时间"
          align="center"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
          </template>
        </el-table-column>

        <el-table-column
          label="在线人数"
          prop="progress"
          align="center"
          width="120px"
        />

        <el-table-column
          label="交卷人数"
          prop="handed"
          align="center"
          width="120px"
        />

        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="120px"
        >
          <template v-slot="scope">
            <router-link :to="{ name: 'ExamWatchDetail', query: { examId: scope.row.id }}">
              <el-link type="primary" icon="el-icon-view">监考大屏</el-link>
            </router-link>
          </template>
        </el-table-column>

      </template>

    </data-table>


  </div>

</template>

<script>
import permission from '@/directive/permission/index.js'
import { mapGetters } from 'vuex'

export default {
  directives: { permission },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          offline: false,
          title: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/exam/watch/exam-paging'
      },

      shareDialog: false,
      examId: ''
    }
  },

  computed: {
    ...mapGetters([
      'siteData'
    ])
  },

  activated() {
    this.$refs.pagingTable.refresh()
  },

  methods: {

    showShare(id) {
      this.shareDialog = true
      this.examId = id
      console.log('考试ID', this.examId)
    }
  }
}
</script>

